<template>
    <div class="l-special">
        <div v-if="specialDataInfo.length > 0" class="l-list">
            <loadCard :cardObj="item" v-for="(item, index) in specialDataInfo" :key="index"></loadCard>
        </div>
        <div class="l-empty" v-else>
            <a-empty description="没有数据" />
        </div>
    </div>
</template>

<script setup>
import loadCard from '@/components/load-card.vue';
import { getCurrentInstance, ref } from "vue";
const { proxy } = getCurrentInstance();
const api = {
    "loadSpecial": "view/loadSpecial",
}
const specialDataInfo = ref([]);
const loadSpecial = async () => {
    let result = await proxy._request({
        url: api.loadSpecial,
        params: {
            pageNo: 1,
            pageSize: 100,
        }
    })
    if (!result) {
        return;
    }
    specialDataInfo.value = result.data.list.map(v => {
        return {
            cover: v.cover,
            name: v.categoryName,
            tips: v.categoryDesc,
            blogNum: v.blogCount,
            url: '/special/' + v.categoryId
        }
    });
}
loadSpecial();
</script>

<style lang="scss" scoped>
.l-special {
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    background: #fff;
    padding: 20px;

    .l-list {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
    }
}
</style>